Learn how to create a simple search bar using pure CSS with our step-by-step tutorial. No JavaScript required!
Table of Contents
Are you looking to enhance the functionality of your website with a sleek and user-friendly search bar? Look no further! In this tutorial, we will guide you through the process of creating a pure CSS simple search bar. The best part? No JavaScript is required!
A search bar is an essential element for any website that allows users to quickly find the content they're looking for. By implementing a pure CSS solution, you can achieve a lightweight and efficient search bar without the need for additional scripting languages. This makes it a perfect choice for those who want a simple and elegant solution while keeping the page load time to a minimum.
Throughout this tutorial, we will provide step-by-step instructions suitable for beginners, ensuring that you can follow along even if you have limited experience with CSS. We will start by setting up the HTML structure and then move on to applying CSS styles to create a visually appealing search bar.
By the end of this tutorial, you will have a solid understanding of how to design and implement a pure CSS simple search bar on your website. Whether you're a web designer looking to add a professional touch or a developer aiming to improve user experience, this tutorial is for you.
Get ready to enhance your website's functionality and aesthetics with our easy-to-follow guide on creating a pure CSS simple search bar. Let's dive in!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our search bar.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's go through each section and understand its purpose:
1. <!DOCTYPE html>: This document type declaration indicates that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag for the HTML document, and the lang attribute specifies the language of the document as English.
3. <head>: This section contains meta-information about the HTML document, such as the title, character encoding, and linked stylesheets.
4. <title>Simple Search Bar</title>: This tag sets the title of the webpage, which is displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag specifies the character encoding for the document, which is set to UTF-8, a widely used character encoding standard that supports a wide range of characters.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport behavior for responsive web design. In this case, it specifies that the width of the viewport should match the device's screen width.
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">: This link tag references an external stylesheet from the Bootstrap framework. It provides access to a library of font icons, specifically the FontAwesome icons in this case.
8. <link rel="stylesheet" href="styles.css" />: This link tag references an external CSS file named "styles.css" that is located in the same directory as the HTML file. This CSS file is used to style the HTML elements.
9. <body>: This is the opening tag for the body section of the HTML document. It contains the visible content of the webpage.
10. <div class="wrap">: This div element with the class "wrap" is used to group related elements together. It serves as a container for the search bar.
11. <div class="search">: This div element with the class "search" is a container for the input field and the search button.
12. <input type="text" class="searchTerm" placeholder="Search...">: This input element represents a text field where users can enter their search query. It has the class "searchTerm" for styling purposes and a placeholder text that is displayed inside the input field as a prompt.
13. <button type="submit" class="searchButton">: This button element serves as the search button. When clicked, it triggers the search action. It has the class "searchButton" for styling purposes.
14. <i class="fa fa-search"></i>: This i element with the classes "fa" and "fa-search" is used to display the search icon from the FontAwesome library. It is nested inside the search button, and visually represents the search functionality.
15. </div>: This closing div tag ends the "search" container.
16. </div>: This closing div tag ends the "wrap" container.
17. </body>: This is the closing tag for the body section.
18. </html>: This is the closing tag for the HTML document.
This is the basic structure of our search bar using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the search bar is in place, the next step is to add styling to the search bar using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our search bar.
Let's go through each section:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);: This line imports a font called "Open Sans" from the Google Fonts API. It allows the webpage to use this font for styling elements.
1. body: This selector targets the <body> element of the webpage and applies the following styles:
- background: #ebe8e8;: Sets the background color of the body to a light grayish color (#ebe8e8).
- font-family: 'Open Sans', sans-serif;: Specifies that the text inside the body should be displayed using the "Open Sans" font if available. If the font is not available, it falls back to a generic sans-serif font.
2. .search: This class selector targets an element with the class name "search" and applies the following styles:
- width: 100%;: Sets the width of the element to 100% of its parent container.
- position: relative;: Positions the element relative to its normal position on the page.
- display: flex;: Specifies that the element should use flexbox layout, which allows for flexible arrangement of its child elements.
3. .searchTerm: This class selector targets an element with the class name "searchTerm" and applies the following styles:
- width: 100%;: Sets the width of the element to 100% of its parent container.
- border: 3px solid #6046ff;: Adds a border to the element with a color of #6046ff (a shade of blue).
- border-right: none;: Removes the right border of the element.
- padding: 5px;: Adds some padding (space) inside the element.
- height: 20px;: Sets the height of the element to 20 pixels.
- border-radius: 5px 0 0 5px;: Specifies rounded corners for the left side of the element.
- outline: none;: Removes the default outline (highlight) when the element is in focus.
4. .searchTerm:focus: This selector targets the .searchTerm element when it is in focus (clicked or selected) and applies the following styles:
- color: #6046ff;: Changes the text color of the element to #6046ff (a shade of blue).
- width: 40px;: Sets the width of the element to 40 pixels.
- height: 36px;: Sets the height of the element to 36 pixels.
- border: 1px solid #6046ff;: Adds a border to the element with a color of #6046ff.
- background: #6046ff;: Sets the background color of the element to #6046ff.
- text-align: center;: Centers the text inside the element.
- color: #fff;: Sets the text color to white.
- border-radius: 0 5px 5px 0;: Specifies rounded corners for the right side of the element.
- cursor: pointer;: Changes the cursor to a pointer when hovering over the element.
- font-size: 20px;: Sets the font size of the text inside the element to 20 pixels.
6. .wrap: This class selector targets an element with the class name "wrap" and applies the following styles:
- width: 30%;: Sets the width of the element to 30% of its parent container.
- position: absolute;: Positions the element relative to its nearest positioned ancestor.
- top: 50%;: Moves the top edge of the element to the middle of its containing element.
- left: 50%;: Moves the left edge of the element to the middle of its containing element.
- transform: translate(-50%, -50%);: Translates the element by -50% horizontally and -50% vertically, effectively centering it on the page.
This will give our search bar an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background: #ebe8e8;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #6046ff;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.searchTerm:focus{
color: #6046ff;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #6046ff;
background: #6046ff;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} Final Output:
Conclusion:
In conclusion, by creating a pure CSS simple search bar, you have added a valuable asset to your website. This search bar will help your visitors navigate through your content more efficiently and enhance their overall experience. Take the time to experiment with different styles and customization options to make the search bar truly your own.
We hope this tutorial has been informative and that you now feel confident in implementing a pure CSS simple search bar. Remember to keep exploring and learning, as the world of web development is constantly evolving. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
